<template>
	<view class="page">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === item.state}"
			 @click="tabClick(item.state)">
				{{item.text}}
			</view>
		</view>

		<!-- <view class="center94 flex m-sb wrap" style="align-content: flex-start; ">
			<view class="w48p " style="height:13rem; margin-top: 0.5rem;" v-for="(item,index) in goodsList" :key="index" @click="todetail(item)">
				<view class="w100p h80p">
					<image :src="item.image" class="w100p h100p" style="border-top-left-radius: 0.2rem;" />
				</view>
				
				<view class="w100p h10p fs9dr"><view class="name ">{{item.name}}</view></view>
				<view class="w100p h10p" style="margin-top: 0.4rem;">
				<span class="decoration">￥{{item.prePrice}},</span>
				<span class="price_count" >会员价:￥{{item.price}}</span>
				
	            </view>
				
			</view>		
		</view> -->

		<view class="center94 flex m-sb wrap" style="align-content: flex-start; margin-top: 0.2rem;">
			<view class="w48p " style="height:auto; margin-top: 1.5rem;" v-for="(item,index) in goodsList" :key="index" @click="todetail(item)">
				<view class="w100p ">
					<image :src="item.image" class="w100p" :style="'height:'+goodsImgHeight " />
				</view>

				<view class="w100p  fs1r" style="height: 2.5rem;">
					<view class="name h100p" style="font-size: 12px; overflow:hidden;">{{$endwith(item.title,28)}}</view>
				</view>
				<view class="center96  flex m-sb" style="margin-top: 0;">
					<span class="price">￥{{item.promotionPrice==null?item.price:item.promtionPrice}}</span>
					<span class="sale-num">销量{{item.saleNum||'0'}}件</span>

				</view>

			</view>
		</view>


		<view style="height: 2rem;">

		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			let _conf = this.getConst();
			let sysinfo = this.getSysInfo();

			let _screenWidth = sysinfo.screenWidth;

			let _bannerHeight = "13rem";
			_bannerHeight = _screenWidth * 46 / 75 + "px";
			let _goodsImgHeight = (_screenWidth * 0.48 * 0.94) + "px";

			return {
				bannerHeight: _bannerHeight,
				goodsImgHeight: _goodsImgHeight,
				conf: _conf,

				carouselList: [{
					"pic": ""
				}],
				categoryList: [],

				adList: [{
					"pic": ""
				}],
				//adList2:[{"pic":""}],


				activity1: {
					image: 'https://codeworld-cloud-shop-1300450814.cos.ap-chengdu.myqcloud.com/2021/02/06/77881612598154251.jpg'
				},
				activity2: {
					image: 'https://codeworld-cloud-shop-1300450814.cos.ap-chengdu.myqcloud.com/2021/02/06/77881612598154251.jpg'
				},
				activity3: {
					image: 'https://codeworld-cloud-shop-1300450814.cos.ap-chengdu.myqcloud.com/2021/02/06/77881612598154251.jpg'
				},


				cond: {
					pageFrom: "",
					pageSize: 2,
				},
				goodsList: [],
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '精选',
					},
					{
						state: 1,
						text: '商品',
					},
					{
						state: 2,
						text: '活动',
				
					},
					{
						state: 3,
						text: '上新',
					}
				],

			};
		},

		onNavigationBarSearchInputClicked: async function(e) {
			//this.$api.msg('点击了搜索框');

			this.$navigateTo(`/pages/goods/HM-search`);
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			console.log(e);
			const index = e.index;
			if (index === 0) {

				this.$navigateTo('/pages/index/notice');
			} else if (index === 1) {

			}
		},
		onReachBottom() {
			uni.showLoading({
				"title": "加载中"
			});
			setTimeout(this.getProudctList, 500);
		},
		onShow() {
			this.$isFocus();

			if (!!this.getUser() && !!this.getUser().id) this.$refreshUser(this.getUser().id);
		},
		onLoad() {

			// this.initConfig();
			// this.wxLogin();


			this.getBannerList();
			this.loadCateList();


			// this.load_ac1();
			// this.load_ac2();
			// this.load_ac3();
			// this.load_ad_cont();

			this.reloadProductList();

		},
		methods: {

			// navToBannerPage(item){
			// 	if(item.type==="type3"){				
			// 		let o={};
			// 		o.image=item.url;
			// 		o.describe="";
			// 		//o.style="width:10rem;height:10rem"

			// 		this.$dataLocal("show_img_param",o);
			// 		this.$navigateTo("/pages/common/show-img")

			// 	}else if(item.type==="type2"){
			// 		this.$navigateTo(item.url)

			// 	}else{// if(item.type==="type1")
			// 		let url = item.url;
			// 		if(this.isWeixin()){
			// 			location.href=url
			// 		}else{
			// 			this.$dataLocal("page_url",url);
			// 			this.$navigateTo("/pages/common/web-page");

			// 			//restgo.jump_to_exter_page(url)
			// 		}
			// 	}


			// },

			toaclist(e) {
				if (this.$notNull(e.goodsNum) && e.goodsNum > 1) {
					let uri = "/pages/goods/goods-list?acid=" + e.id + "&name=" + e.name;
					this.$navigateTo(uri);

				} else {
					this.$post("goods/query", {
						"activityId": e.id
					}, res => {
						let li = res.rows;
						if (!!li && li.length > 0) {
							this.todetail(li[0]);
						} else {
							this.$toast("还没有商品参与该活动")
						}
					})
				}
			},

			// load_ac1(){
			// 	this.$post("activity/find",{"id":3},res=>{
			// 		console.log(res);
			// 		let data=res.data;
			// 		let img_list=[];
			// 		if(!!data.imageList)img_list=JSON.parse(data.imageList);

			// 		data.image=img_list[0];

			// 		this.activity1=data;
			// 	})

			// },
			// load_ac2(){
			// 	this.$post("activity/find",{"id":2},res=>{
			// 		console.log(res);
			// 		let data=res.data;
			// 		let img_list=[];
			// 		if(!!data.imageList)img_list=JSON.parse(data.imageList);

			// 		data.image=img_list[0];

			// 		this.activity2=data;
			// 	})

			// },

			// load_ac3(){
			// 	this.$post("activity/find",{"id":1},res=>{
			// 		console.log(res);
			// 		let data=res.data;
			// 		let img_list=[];
			// 		if(!!data.imageList)img_list=JSON.parse(data.imageList);

			// 		data.image=img_list[0];

			// 		this.activity3=data;
			// 	})

			// },

			todetail(e) {
				let id = e.id;
				let url = `/pages/goods/detail?id=${id}`
				this.$navigateTo(url);
			},

			tocatelist(e) {
				let cur_cate = e;
				let uri = '/pages/goods/goods-list?cid=' + cur_cate.id + '&name=' + cur_cate.name;
				//console.log(uri);
				this.$navigateTo(uri);

			},

			// load_ad_cont(){


			// 	let that=this;
			// 	this.$post("resource/find",{"name":"cfg_mall_fixed"},function(res){
			// 		var li=[];
			// 		var li_str=res.data.value;

			// 		if(!!li_str){
			// 			li=JSON.parse(li_str);
			// 		}
			// 		for(var i in li){
			// 			li[i].id=parseInt(i)+1;
			// 		}


			// 		that.adList=li;					
			// 	})
			// },

			/* 			load_ad_cont2(){
						
							
							let that=this;
							this.$post("resource/find",{"name":"cfg_mall_fixed2"},function(res){
								var li=[];
								var li_str=res.data.value;
						
								if(!!li_str){
									li=JSON.parse(li_str);
								}
								for(var i in li){
									li[i].id=parseInt(i)+1;
								}
								
								
								that.adList2=li;					
							})
						}, */

			getBannerList() {
				uni.request({
					url: 'http://localhost:8888/codeworld-marketing/carouse/get-carouse-enable',
					method: 'GET',
					success: (response => {
						if (response.data.code === 20000) {
							var li = [];
							li = response.data.data;
							for (var i in li) {
								li[i].id = parseInt(i) + 1;
							}
							this.carouselList = li;
							this.swiperLength = li.length;
						}
					})
				})
			},

			reloadProductList() {
				this.cond.pageFrom = 0;
				this.goodsList = [],
					this.getProudctList();
			},
			getProudctList() {
				var o = {}
				o.pageFrom = this.cond.pageFrom;
				o.pageSize = this.cond.pageSize;
				var that = this;
				uni.request({
					url: 'http://localhost:8888/codeworld-search/goods/get-new-product-index',
					method: 'POST',
					data: JSON.stringify(o),
					success: (response) => {
						if (response.data.code === 20000) {
							var li = response.data.data;
							for (var i in li) {
								var item = li[i];
								item.image = that.getLi(item.images)[0] || that.getConst("").default_img;
							}
							that.goodsList = that.goodsList.concat(li);
							uni.hideLoading();
							if (li.length > 0) {
								that.cond.pageFrom = that.cond.pageFrom + 1;
							}
						}
					}
				})
			},

			loadCateList() {
				uni.request({
					url: 'http://localhost:8888/codeworld-goods/category/get-parent-category-app',
					method: 'GET',
					success: (response) => {
						if (response.data.code === 20000) {
							this.categoryList = response.data.data
						}
					}
				})
			},
			tosearch(e) {
				console.log(e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.name {
		font-size: 26upx;
		color: #555;
	}

	.sale-num {
		color: #bbbbbb;
		font-size: 14px;

	}

	.price {
		color: #fa436a;
		font-size: 14px
	}
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;
	
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #333333;
			position: relative;
	
			&.current {
				color: #fa436a;
	
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #fa436a;
				}
			}
		}
	}
</style>
